<template>
  <div class="container">
    <div class="container">
      <!-- 导航固定定位 fixed -->
      <van-nav-bar
        fixed
        title="搜索结果"
        left-arrow
        @click-left="$router.back()"
      />
      <!-- 文章列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
      >
        <van-cell-group>
          <van-cell
            v-for="item in list"
            :key="item.art_id.toString()"
            :to="`/article/${item.art_id.toString()}`"
          >
            <div class="article_item">
              <h3 class="van-ellipsis">
                {{ item.title }}
              </h3>
              <div class="img_box" v-if="item.cover.type === 3">
                <van-image
                  class="w33"
                  fit="cover"
                  :src="item.cover.images[0]"
                />
                <van-image
                  class="w33"
                  fit="cover"
                  :src="item.cover.images[1]"
                />
                <van-image
                  class="w33"
                  fit="cover"
                  :src="item.cover.images[2]"
                />
                <div class="img_box" v-if="item.cover.type === 1">
                  <van-image
                    class="w100"
                    fit="cover"
                    :src="item.cover.images[0]"
                  />
                </div>
              </div>
              <div class="info_box">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}</span>
                <span>{{ item.pubdate | relTime }}</span>
              </div>
            </div>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import { searchArticles } from '../../api/article'
export default {
  name: 'search-result',
  data () {
    return {
      // 文章列表
      list: [],
      loading: false,
      finished: false
    }
  },
  created () {
    // 初始化默认=》查询条件数据 (不是响应式的)
    this.query = {
      page: 1,
      q: this.$route.query.q,
      per_page: 20
    }
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      // 加载数据
      const { status, data } = await searchArticles(this.query)
      console.log(data)
      if (status === 200) {
        this.list.push(...data.results)
        // 加载状态结束
        this.loading = false
        // 数据多少条  长度
        if (data.total_count === this.list.length) {
          this.finished = true
        } else {
          // 数据加载
          this.query.page++
        }
      }

      // 数据全部加载完成
      // if (this.list.length >= 40) {
      //   this.finished = true
      // }
    }
  }
}

</script>

<style scoped lang='less'>
.container {
  padding-top: 46px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      height: 180px;
      width: 100%;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    span {
      padding-right: 10px;
    }
  }
}
</style>
